<template>
  <!-- 学生救助信息公示墙 -->
  <div>
    <h1
      style="
        background-color: rgb(243, 192, 126);
        width: 24vw;
        margin-left: 37vw;
        padding: 1vw 1vw;
        border-radius: 5px;
      "
    >
      学生救助信息公示墙
    </h1>
    <el-row :gutter="20">
      <el-col :span="6">
        <div>
          <h3>
            <img
              src="../../../assets/image/charity/个人信息.png"
              alt=""
            />基本信息
          </h3>
          <div class="card-text">
            <span>编号:LL01</span>
            <br />
            <span>学生所处学段:xxxxx</span>
            <br />
            <span>学生现就读学校:xxxxx</span>
            <br />
            <span>政治面貌:xxxx</span>
            <br />
            <span>出生日期:xxxx</span>
            <br />
            <span>年龄:xxxx</span>
          </div>
        </div>
      </el-col>
      <el-col :span="6">
        <div>
          <h3>
            <img
              src="../../../assets/image/charity/课件学习情况分析.png"
              alt=""
            />学业状况
          </h3>
          <div class="card-text">
            <span>考试名称:xxxx</span>
            <br />
            <span>考试成绩:xxxxx</span>
            <br />
            <span>班级排名:xxxx</span>
          </div>
        </div>
      </el-col>
      <el-col :span="6">
        <div>
          <h3>
            <img
              src="../../../assets/image/charity/获奖情况.png"
              alt=""
            />获奖情况
          </h3>
          <div class="card-text">
            <span>获奖名称:xxxx</span>
            <br />
            <span>获奖时间:xxxxx</span>
            <br />
            <span>奖状图片:xxxx</span>
          </div>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="6">
        <div>
          <h3>
            <img
              src="../../../assets/image/charity/个人信息.png"
              alt=""
            />基本信息
          </h3>
          <div class="card-text">
            <span>编号:LL02</span>
            <br />
            <span>学生所处学段:xxxxx</span>
            <br />
            <span>学生现就读学校:xxxxx</span>
            <br />
            <span>政治面貌:xxxx</span>
            <br />
            <span>出生日期:xxxx</span>
            <br />
            <span>年龄:xxxx</span>
          </div>
        </div>
      </el-col>
      <el-col :span="6">
        <div>
          <h3>
            <img
              src="../../../assets/image/charity/课件学习情况分析.png"
              alt=""
            />学业状况
          </h3>
          <div class="card-text">
            <span>考试名称:xxxx</span>
            <br />
            <span>考试成绩:xxxxx</span>
            <br />
            <span>班级排名:xxxx</span>
          </div>
        </div>
      </el-col>
      <el-col :span="6">
        <div>
          <h3>
            <img
              src="../../../assets/image/charity/获奖情况.png"
              alt=""
            />获奖情况
          </h3>
          <div class="card-text">
            <span>获奖名称:xxxx</span>
            <br />
            <span>获奖时间:xxxxx</span>
            <br />
            <span>奖状图片:xxxx</span>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
export default {};
</script>
<style>
.el-row {
  margin-top: 5vh;
  margin-left: 10vw;
}
.el-col > div {
  width: 25vw;
  height: 50vh;
  margin-left: 150px;
  border: 3px solid rgb(236, 186, 136);
  background-color: rgb(17, 107, 110);
  border-radius: 8px;
  box-shadow: -6px 2px 4px rgb(243, 192, 126);
}
.el-col > div > h3 {
  color: white;
  margin-top: 5px;
}
.el-col > div > h3 > img {
  padding-right: 5px;
  margin-left: 110px;
  margin-bottom: 5px;
  vertical-align: middle;
}
.card-text {
  color: white;
  margin-left: 100px;
  margin-top: 20px;
  line-height: 20px;
}
</style>
